

<!-- 第一种v2的option Api格式 -->
<!-- <script>
export default {
    data() { 
        return {
            a: 1
        }
    }
}
</script> -->
<!-- 第二种setup函数模式 -->
<!-- <script>
export default{
        setup () {
           const b=2
            return {
                b
            }
        }
}
</script> -->
<!-- 第三种setup语法糖 -->
<script setup lang="ts">
// 支持动态点击
const event = "click"

const c: number[] = [1, 2, 3, 4, 5]
// .stop 组织了冒泡
const parent = () => {
    console.log("我是父级")
}
const style = {
    color: "red",
    border: ".0625rem solid red"
}
const xxx = () => {
    console.log("点击了xxx")
}
</script>

<template>
    <div>
        <!-- {{ a }} -->
        <!-- {{ b }} -->
        {{ c.map(v => ({ num: v })) }}
        123
        <!-- 点击 -->
        <div @click="parent">
            <button @[event].stop="xxx">点我</button>
        </div>
        <!-- style -->
        <div :style="style"></div>
    </div>
</template>


<style>
* {
    color: #fff;
}
</style>